<template>
  <div class="title">确认<span>包子</span>本人操作</div>
  <div class="titleTips">请确保正脸在取景中根据屏幕指示完成识别</div>
  <img class="bigIcon" src="../../static/faceIcon.png" alt="" />
  <ul class="faceTips">
    <li class="tipsItem">
      <div class="tipsIcon">
        <img src="../../static/select.png" alt="" class="img" />
      </div>
      <div class="tipsText">正脸置于框内</div>
    </li>
    <li class="tipsItem">
      <div class="tipsIcon">
        <img src="../../static/select.png" alt="" class="img" />
      </div>
      <div class="tipsText">按文字提示做相应动作</div>
    </li>
  </ul>
  <div class="takeMust">
    <div class="title">拍照须知</div>
    <div class="value">请确保是账户本人操作</div>
  </div>
  <ul class="mustTips">
    <li class="tipsItem">
      <div class="mustBigIcon">
        <img src="../../static/assets_face_01.png" alt="" class="img" />
      </div>
      <div class="tipsText">
        <div class="textIcon">
          <img src="../../static/select_icon.png" alt="" class="selectIcon" />
        </div>
        <div class="textValue">正对手机</div>
      </div>
    </li>
    <li class="tipsItem">
      <div class="mustBigIcon">
        <img src="../../static/assets_face2_02.png" alt="" class="img" />
      </div>
      <div class="tipsText">
        <div class="textIcon">
          <img src="../../static/select_icon.png" alt="" class="selectIcon" />
        </div>
        <div class="textValue">光线充足</div>
      </div>
    </li>
    <li class="tipsItem">
      <div class="mustBigIcon">
        <img src="../../static/assets_face2_03.png" alt="" class="img" />
      </div>
      <div class="tipsText">
        <div class="textIcon">
          <img src="../../static/select_icon.png" alt="" class="selectIcon" />
        </div>
        <div class="textValue">放慢动作</div>
      </div>
    </li>
  </ul>
  <div class="agreeProtocol">
    <radio-group @change="checkEvent" style="transform: scale(0.7)">
      <radio value="true" color="#007aff" />
    </radio-group>
    <div class="agreeText">
      您知悉并同意应用提供者：调用相机、存储、麦克风权限，收集、使用您本人您的身份信息及人脸视频、图像，向合法数据持有者核实验证您的真实身份。我已认证阅读并同意
      <span style="color: #3277f2">《全部协议》</span>
    </div>
  </div>
  <div class="goFace" @click="goFace">开始</div>
  <div class="add"></div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import * as http from "../../utils/http";
import * as utils from "../../utils/utils";
import { onLoad } from "@dcloudio/uni-app";
import { useAppStore } from "../../store/index";
const store = useAppStore();
let param = null;
onLoad((options) => {
  param = JSON.parse(options.value);
  console.log(param);
});
const goFace = () => {
  http
    .faceAuth({
      cardNo: param.cardNo,
      custName: param.custName,
      // #流程id
      // ruleId,
    })
    .then((result) => {
      // uni.startVerify({
      //   data: {
      //     token: result.data.bizToken,
      //   },
      //   success: (res) => {
      //     console.log(res);
      //     setTimeout(() => {
            // 验证成功后，拿到token后的逻辑处理，具体以客户自身逻辑为准
            let params = {
              // bizToken: result.data.bizToken,
              bizToken: 'adada122d2f2f23r2fef2423432f',
              // #流程id
              // ruleId,
              orderId: store.orderId,
              playersId: store.bizId,
              playersType: store.playersType,
              orderExecRcdId: store.orderExecRcdId,
            };
            // 查询结果
            http
              .faceResult({
                ...params,
              })
              .then((res) => {
                wx.setStorageSync("faceFramesResult", res.faceFramesResult);
                wx.setStorageSync("faceVideoResult", res.faceVideoResult);
                wx.navigateTo({
                  url:
                    "../previewMsg/previewMsg?value=" + JSON.stringify(param),
                });
              });
    //       }, 500);
    //     },
    //     fail: (err) => {
    //       console.log(err);
    //     },
    //   });
    });
};
</script>

<style scoped lang="scss">
.add {
  height: 62rpx;
}
.mustTips {
  margin-top: 39rpx;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .tipsItem {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .mustBigIcon {
      width: 118rpx;
      height: 100rpx;
      margin-bottom: 13rpx;
      .img {
        width: 100%;
        height: 100%;
      }
    }
    .tipsText {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .textIcon {
        width: 23rpx;
        height: 21rpx;
        margin-right: 7rpx;
        .selectIcon {
          width: 100%;
          height: 100%;
        }
      }
      .textValue {
        height: 28rpx;
        line-height: 28rpx;
        font-size: 20rpx;
      }
    }
  }
}
.takeMust {
  margin-top: 68rpx;
  margin-left: 61rpx;
  display: flex;
  justify-content: start;
  align-items: flex-end;
  .title {
    height: 45rpx;
    line-height: 45rpx;
    color: #333333;
    font-size: 32rpx;
    margin-right: 20rpx;
  }
  .value {
    height: 33rpx;
    line-height: 33rpx;
  }
}
.faceTips {
  margin-top: 50rpx;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  .tipsItem {
    display: flex;
    justify-content: start;
    align-items: center;
    .tipsIcon {
      width: 35rpx;
      height: 35rpx;
      border-radius: 50%;
      margin-right: 12rpx;
      .img {
        width: 100%;
        height: 100%;
      }
    }
    .tipsText {
      height: 42rpx;
      line-height: 42rpx;
      color: #000000;
      font-size: 30rpx;
    }
  }
}
.title {
  text-align: center;
  font-size: 48rpx;
  color: #333;
  height: 67rpx;
  line-height: 67rpx;
  margin-top: 20rpx;
}
.titleTips {
  height: 42rpx;
  line-height: 42rpx;
  text-align: center;
  font-size: 30rpx;
  margin-top: 13rpx;
  margin-bottom: 104rpx;
}
.bigIcon {
  width: 420rpx;
  height: 420rpx;
  margin: 0 165rpx;
}
.goFace {
  width: 590rpx;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 44rpx;
  margin: 154rpx 80rpx;
  text-align: center;
  background-color: #3277f2;
  font-size: 34rpx;
  color: #fff;
}
.agreeProtocol {
  margin: 40rpx;
  display: flex;
  align-items: flex-start;
  .agreeText {
    font-size: 24rpx;
    line-height: 33rpx;
    color: rgba($color: #000000, $alpha: 0.45);
  }
}
</style>
